<template>
	<view class="content" :style="{'height':windowHeight+'px'}">
		<view class="user-info">
			<!-- 用户头像 -->
			<image :src="userAvatar" mode="widthFix"></image>
			<text v-text="userName">用户名</text>
			<text v-text="phone">电话号码</text>
		</view>
		<view class="student-operate">
			<uni-list>
				<uni-list-item title="学员报名" link to="./student/studentRegistered"></uni-list-item>
				<uni-list-item title="学员检索" :rightText="jianSuo.toString()" link to="./student/formalStu"></uni-list-item>
				<uni-list-item title="意向学员" :rightText="yiXiang.toString()" link to="./student/intentionStu"></uni-list-item>
				<uni-list-item title="到期提醒" :rightText="daoQi.toString()" link to="./student/remindStu"></uni-list-item>
			</uni-list>
		</view>
		<view class="order-operate">
			<uni-list>
				<!-- to是超链接地址 -->
				<uni-list-item title="我的订单" link to="./myOrder/myOrder"></uni-list-item>
			</uni-list>
		</view>
		<view class="account-operate">
			<uni-list>
				<uni-list-item title="修改信息" link to="../reviseInfo/reviseInfo"></uni-list-item>
				<uni-list-item title="修改密码" link to=""></uni-list-item>
			</uni-list>
		</view>
		<button class="exit-button" @click="exit()">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				userAvatar: '../../static/image/user-icon.svg',
				phone: '',
				userName: '',
				jianSuo: 0,
				yiXiang: 0,
				daoQi: 0,
			}
		},
		onLoad() {
			let _this = this;
			// 获取页面高度
			_this.$uniApi.getWindowHeight(_this);
			this.getUserInfo();
		},
		methods: {
			exit() {
				uni.clearStorage();
				uni.navigateTo({
					url: "../index/home"
				})
			},
			getUserInfo(){
				uni.getStorage({
					key:"userInfo",
					success: (res) => {
						console.log(res.data)
						this.userName=res.data.nickName;
						this.phone=res.data.phonenumber;
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F5F5F5;
	}

	.user-info {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		width: 750rpx;
		height: 400rpx;
		background: url(../../static/image/background-guwen.jpg);
		background-size: cover;
		background-position: center;
	}

	.user-info image {
		width: 150rpx;
	}

	.user-info text {
		font-size: 20px;
		color: #353535;
		margin-top: 20rpx;
	}

	.student-operate,
	.order-operate,
	.account-operate {
		margin-top: 20rpx;
		width: 750rpx;
	}

	.exit-button {
		margin-top: 40rpx;
		font-size: 16px;
		width: 700rpx;
		background-color: #FFFFFF;
	}
</style>
